<template>
  <div>
    <el-drawer ref="drawer" :with-header="withHeader" :append-to-body="true" :size="size" :title="title" :visible.sync="drawer" :direction="direction" @closed="close">
      <template #title>
        <div>
          <span class="drawer__title">{{ title }}</span>
        </div>
      </template>
      <div class="drawer">
        <slot></slot>
      </div>
      <div class="footer" v-if="attrs.showFoot">
        <el-button type="primary" @click="$emit('confirm')">确定</el-button>
        <el-button type="plain" @click="$emit('cancel')">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: 'MsuiDrawer',
  props: {
    size: {
      type: String,
      default: '50%'
    },
    withHeader: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    attrs: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      title: '标题'
    };
  },
  methods: {
    close() {
      this.drawer = false
      if(this.attrs.closed instanceof Function) {
        this.attrs.closed()
      }
    }
  }
};
</script>

<style scoped>
.drawer {
  padding: 0 100px;
  margin: 0 auto;
  height: 100%;
}
/* 
::v-deep .el-drawer__header {
  border-bottom: 1px solid #aba7a7;
  padding: 15px;
  background: #0e623a;
  color: white;
} */
::v-deep .el-drawer__body {
  overflow: auto;
}

.drawer__title {
  width: 116px;
  height: 32px;
  border-radius: 100px;
  background: #f2f3f5;
  color: var(--background-primary);
  font-size: 14px;
  font-weight: 350;
  padding: 5px 16px;
}
.footer {
  position: absolute;
  z-index: 100;
  bottom: 0;
  right: 0px;
  height: 60px;
  line-height: 60px;
  border-top: 1px solid #ccc;
  width: 100%;
  padding-left: 20px;
}
</style>